<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@include file="../head.jsp"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/fsxt/resources/css/jquery-ui-1.8.14.custom.css" />
<script type="text/javascript" src="/fsxt/script/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/fsxt/script/jquery-ui.1.8.5.min.js"></script>
<script type="text/javascript">
( function ( )   {
    var rootIds = [];
    var rootId = '';
    var key;
    var type;
    Ext.onReady(function(){

        var noReloadFunc = function(response,options){
            Ext.MessageBox.hide();
            var result = Ext.JSON.decode(response.responseText);
            if(result.success){
                Ext.Msg.show({title:'提示',msg:'恭喜!保存数据成功!',icon:Ext.MessageBox.INFO,buttons:Ext.MessageBox.OK,
                    fn:function(){reloadTree();}
                });
            }else{
                Ext.Msg.show({title:'提示',msg:result.msg,icon:Ext.MessageBox.WARNING,buttons:Ext.MessageBox.OK});
            }
        };

        var reloadFunc = function(response,options){
            Ext.MessageBox.hide();
            var result = Ext.JSON.decode(response.responseText);
            if(result.success){
                Ext.Msg.show({title:'提示',msg:'恭喜!保存数据成功!',icon:Ext.MessageBox.INFO,buttons:Ext.MessageBox.OK,
                    fn:function(){location.href = '/fsxt/sys/operation.action'}
                });
            }else{
                Ext.Msg.show({title:'提示',msg:result.msg,icon:Ext.MessageBox.WARNING,buttons:Ext.MessageBox.OK});
            }
        };

        Ext.QuickTips.init();

        Ext.define('treeModel', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'id',type: 'string'},
                {name: 'menuName',type: 'string'},
                {name: 'menuLink',type: 'string'},
                {name: 'text',type: 'string'}
            ]
        });

        <s:iterator id="cell" value="#request.tabList" >
        rootIds.push('<s:property value="id"/>');

        var store_<s:property value="id"/> = Ext.create('Ext.data.TreeStore', {
            id:'store_<s:property value="id"/>',
            model:'treeModel',
            nodeParam:'id',
            autoLoad:false,
            proxy: {
                type:'ajax',
                url:'/fsxt/sys/operation!getChildTree.action'
            },
            root: {
                id: '<s:property value="id"/>',
                text: '<s:property value="menuName"/>',
                expanded: true
            },
            listeners:{
                'load':function(){
                    tree_<s:property value="id"/>.expandAll();
                }
            }
        });

        var tree_<s:property value="id"/> = Ext.create('Ext.tree.Panel', {
            store:store_<s:property value="id"/>,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop'
                }
            },
            renderTo: 'tree_<s:property value="id"/>',
            autoScroll: true,
            split: true,
            rootVisible:true,
            lines:true,
            height:400,
            width:600,
            title: '<s:property value="menuName"/>',
            containerScroll: true,
            useArrows: true,
            listeners:{
                'itemclick':function(view,record,item,index,evt,options){
                    showDialog(record.data);
                }
            }
        });

        </s:iterator>
        rootId = rootIds[0];

        function reloadTree(){
        <s:iterator id="cell" value="#request.tabList" >
            store_<s:property value="id"/>.load();
        </s:iterator>
        }

        var tabWindow = Ext.create('widget.window',{
            id:'tabWindow',
            title: '编辑标签',
            autoHeight:true,
            width:400,
            resizable : false,
            closeAction : 'hide',
            plain: true,
            modal:true,
            draggable : true,
            items: [{
                fieldLabel:'标签名称',
                labelAlign:'left',
                id:'tabName',
                name:'tabName',
                xtype:'textfield',
                width:380,
                allowBlank:false
            }],
            buttons:[{
                text:'保存',
                handler:function(){
                    if(Ext.getCmp('tabName').getValue() == ''){
                        Ext.MessageBox.show({title:'提示',msg:'请填写标签名称!',icon:Ext.MessageBox.WARNING,buttons:Ext.MessageBox.OK});
                        return;
                    }
                    var params = {};
                    params.key = key;
                    params.name = encodeURIComponent(Ext.getCmp('tabName').getValue());
                    params.id = rootId;

                    var data = {};
                    data.url = '/fsxt/sys/operation!saveTab.action';
                    data.params = params;
                    data.callback = reloadFunc;
                    extAjaxSubmit.call(data);
                }
            },{
                text:'取消',
                handler:function(){
                    tabWindow.hide(Ext.get('addTab'));
                }
            }]
        });

        var menuWindow = Ext.create('widget.window',{
            id:'menuWindow',
            title: '编辑菜单',
            width: 400,
            autoHeight:true,
            resizable : false,
            closeAction : 'hide',
            plain: true,
            modal:true,
            draggable : true,
            layout: 'fit',
            items: [{
                fieldLabel:'菜单名称',
                id:'menuName',
                name:'menuName',
                xtype:'textfield',
                width:300,
                allowBlank:false
            },{
                fieldLabel:'菜单链接',
                id:'menuLink',
                name:'menuLink',
                xtype:'textfield',
                width:380,
                allowBlank:false
            }],
            buttons:[{
                text:'保存',
                handler:function(){
                    var params = {};
                    if(Ext.getCmp('menuName').getValue() == '' || Ext.getCmp('menuLink').getValue() == ''){
                        Ext.Msg.show({title:'提示',msg:'请填写[菜单名称]与[菜单链接]'});
                        return;
                    }
                    params.name = encodeURIComponent(Ext.getCmp('menuName').getValue());
                    params.link = Ext.getCmp('menuLink').getValue();
                    params.id = obj.id;
                    params.key = key;
                    params.type = type;

                    var data = {};
                    data.url = '/fsxt/sys/operation!saveMenu.action';
                    data.params = params;
                    data.callback = noReloadFunc;
                    extAjaxSubmit.call(data);
                    menuWindow.hide();
                }
            },{
                text:'取消',
                handler:function(){
                    menuWindow.hide();
                }
            }]
        });

        var buttonWindow = Ext.create('widget.window',{
            id:'buttonWindow',
            title: '操作窗口',
            width: 400,
            autoHeight:true,
            resizable : false,
            closeAction : 'hide',
            plain: true,
            modal:true,
            draggable : true,
            items: [{
                xtype:'button',
                text:'刷新tree',
                iconCls:'saved',
                handler:function(){
                    reloadTree();
                    buttonWindow.hide();
                }
            },{
                xtype:'button',
                text:'增加同级',
                iconCls:'create',
                handler:function(){
                    buttonWindow.hide();
                    key = 'create';
                    if(isRoot(obj.id)){
                        tabWindow.show();
                        Ext.getCmp('tabName').setValue('');
                        return;
                    }
                    type = 'add';
                    menuWindow.show();
                    Ext.getCmp('menuName').setValue('');
                    Ext.getCmp('menuLink').setValue('');
                }
            },{
                xtype:'button',
                text:'增加下级',
                iconCls:'create',
                handler:function(){
                    buttonWindow.hide();
                    key = 'create';
                    type = 'addChild';
                    menuWindow.show();
                    Ext.getCmp('menuName').setValue('');
                    Ext.getCmp('menuLink').setValue('');
                }
            },{
                xtype:'button',
                text:'编辑节点',
                iconCls:'update',
                handler:function(){
                    buttonWindow.hide();
                    key = 'update';
                    menuWindow.show();
                    Ext.getCmp('menuName').setValue(obj.text);
                    Ext.getCmp('menuLink').setValue(obj.menuLink);
                }
            },{
                xtype:'button',
                text:'删除节点',
                iconCls:'delete',
                handler:function(){
                    buttonWindow.hide();
                    if(obj == null || obj == undefined || obj.id == '' || obj.id == undefined || obj.id == null ){
                        Ext.MessageBox.show({title:'提示',msg:'错误!未能获取节点.',icon:Ext.MessageBox.WARNING,buttons:Ext.Msg.OK});
                        return;
                    }
                    if(isRoot(obj.id)){
                        Ext.MessageBox.confirm('确认','确定删除此标签及所有子节点么?',function(btn){
                            if(btn == 'yes'){
                                var params = {};
                                params.id = obj.id;
                                var data = {};
                                data.url =  '/fsxt/sys/operation!deleteMenu.action';
                                data.params = params;
                                data.callback = reloadFunc;
                                extAjaxSubmit.call(data);
                            }
                        });
                        return;
                    }
                    Ext.MessageBox.confirm('确认','确定删除此节点及所有子节点么?',function(btn){
                        if(btn == 'yes'){
                            var params = {};
                            params.id = obj.id;
                            var data = {};
                            data.url =  '/fsxt/sys/operation!deleteMenu.action';
                            data.params = params;
                            data.callback = noReloadFunc;
                            extAjaxSubmit.call(data);
                        }
                    });
                }
            }]
        });

        var form = Ext.create('Ext.form.Panel',{
            labelAlign:'left',
            layout: 'fit',
            title:'菜单维护',
            frame:'true',
            contentEl:'formContent',
            autoScroll:true,
            dockedItems:[{
                dock:'top',
                xtype:'toolbar',
                items:['-',{
                    xtype:'button',
                    text:'添加标签',
                    id:'addTab',
                    iconCls:'create',
                    handler:function(){
                        key = 'create';
                        tabWindow.show(Ext.get('addTab'));
                        Ext.getCmp('tabName').setValue('');
                    }
                },'-',{
                    xtype:'button',
                    text:'编辑标签',
                    id:'editTab',
                    iconCls:'update',
                    handler:function(){
                        if(rootId == '' || rootId == undefined){
                            Ext.MessageBox.show({title:'提示',msg:'错误!未能获取标签.',icon:Ext.MessageBox.WARNING,buttons:Ext.Msg.OK});
                            return;
                        }
                        key = 'update';
                        tabWindow.show(Ext.get('editTab'));
                    }
                },'-',{
                    xtype:'button',
                    text:'删除标签',
                    id:'deleteTab',
                    iconCls:'delete',
                    handler:function(){
                        if(rootId == '' || rootId == undefined){
                            Ext.MessageBox.show({title:'提示',msg:'错误!未能获取标签.',icon:Ext.MessageBox.WARNING,buttons:Ext.Msg.OK});
                            return;
                        }
                        Ext.MessageBox.confirm('确认','确定删除此标签及所有子标签么?',function(btn){
                            if(btn == 'yes'){
                                var params = {};
                                params.id = rootId;
                                var data = {};
                                data.url =  '/fsxt/sys/operation!deleteMenu.action';
                                data.params = params;
                                data.callback = reloadFunc;
                                extAjaxSubmit.call(data);
                            }
                        });
                    }
                },'-',{
                    xtype:'button',
                    text:'保存排序',
                    id:'saveIndex',
                    iconCls:'accept',
                    handler:function(){
                        var indexs = '';
                        $('#tabsDiv ul').find('input[type=hidden]').each(function(){
                            indexs += $(this).val()+',';
                        });
                        var params = {};
                        params.indexs = indexs;
                        var data = {};
                        data.url = '/fsxt/sys/operation!saveTabIndex.action';
                        data.params = params;
                        data.callback = reloadFunc;
                        extAjaxSubmit.call(data);
                    }
                },'-']
            }]
        });

        form.render(document.body);

        $('#tabsDiv').tabs({
            select: function(event, ui) {
                rootId = ui.panel.id;
            }
        }).find(".ui-tabs-nav").sortable({axis:'x'});

        function extAjaxSubmit(){
            Ext.MessageBox.wait("", "正在保存设置,请稍候...");
            Ext.Ajax.request({
                url:this.url,
                method: 'post',
                params: this.params,
                success:this.callback,
                failure:function(response,options){
                    Ext.MessageBox.hide();
                    Ext.Msg.show({title:'提示',msg:'糟糕!保存设置失败.',buttons: Ext.MessageBox.OK,icon:Ext.MessageBox.ERROR});
                }
            });
        }

    });

    document.onmouseover = mouseDown;
    var posX,posY;
    var obj;

    function mouseDown(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        posX = mousePos.x;
        posY = mousePos.y;
    }

    function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }

    function isRoot(id){
        for(var i = 0;i<rootIds.length;i++){
            if(rootIds[i] == id){
                return true;
            }
        }
        return false;
    }

    function showDialog(node){
        obj = node;
        Ext.getCmp('buttonWindow').setPosition(posX,posY + 15);
        Ext.getCmp('buttonWindow').show();
    }
} ) ( ) ;
</script>
</head>
<body>
<form name="mainForm" id="mainForm" action="/fsxt/sys/Operation.do" method="post" >
    <div id="formContent">
        <div id="tabsDiv">
            <ul>
                <s:iterator id="cell" value="#request.tabList" >
                    <li>
                        <input type="hidden" value="<s:property value="id"/>"/>
                        <a href="#<s:property value="id"/>"><s:property value="menuName"/></a>
                    </li>
                </s:iterator>
            </ul>
            <s:iterator id="cell" value="#request.tabList" >
                <div id="<s:property value="id"/>" >
                    <div id="tree_<s:property value="id"/>" ></div>
                </div>
            </s:iterator>
        </div>
    </div>
</form>
</body>
</html>